﻿@{
    ViewBag.Title = " 兑礼网控制中心-商品管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .fitem label {
        display: inline-block;
        margin-top: 10px;
        width: 110px;
    }

    .fitems {
        margin-left: 10px;
        float: left;
        padding: 10px 0px;
    }
</style>
<script src="~/Content/js/ajaxfileupload.js"></script>
<script src="~/Content/js/ImgToolTip.js"></script>
@*<div class="easyui-layout" style="width:100%;height:100%;">*@
<div id="ToolbarPanel" class="searchbox easyui-panel" title="搜索条件" style="width:100%" data-options="iconCls:'icon-search',collapsible:true,closable:false,collapsed:false">
    <div class="fitems">
        <label>商品名称</label>
        <input id="SpName" class="easyui-textbox" data-options="onChange:search">
    </div> 
</div>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newware()">添加商品</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editware()">编辑商品</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="delware()">删除商品</a>
</div>
<table id="dg" style="width: 100%;" class="easyui-datagrid" method="POST" url="@Url.Action("GetList", "Ware")" toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" singleselect="true" autorowheight="true" resizable="true">
    <thead>
        <tr>
            <th field="Name">商品名称</th>
            <th field="Pirce" width="75">商品单价</th>
            <th field="Count" width="50">商品数量</th>
            <th field="ConvertedQuantity" width="50">已兑换数量</th>
            <th field="ImageUrl" formatter="formatterurl" width="50">商品图片</th>
            <th field="Remark" width="50">商品描述</th>
        </tr>
    </thead>
</table>

@*</div>*@
<div id="dlg" modal="true" class="easyui-dialog" style="width:480px;height:400px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <input name="ID" hidden="hidden" value="0" />
        <input name="ConvertedQuantity" hidden="hidden" />
        <input id="ImageUrl" name="ImageUrl" hidden="hidden" />
        <div class="fitem" style="width:100%;">
            <label>商品名称</label>
            <input name="Name" class="easyui-textbox" required="true">
        </div>
        <div class="fitem" style="width:100%;">
            <label>商品单价</label>
            <input id="Pirce" name="Pirce" class="easyui-numberbox" data-options="min:0,precision:2" />
        </div>
        <div class="fitem" style="width:100%;">
            <label>商品数量</label>
            <input id="Count" name="Count" class="easyui-numberbox" required="true" data-options="min:0" />
        </div>
        <div class="fitem" style="width:100%;">
            <label>图片建议大小</label>
            <span>180 * 180</span>
        </div>
        <div class="fitem" style="width:100%;">
            <label>上传附件</label>
            <input name="fileUpLoad" id="fileUpLoad" type="file" onchange="ajaxFileUpload('fileUpLoad', 'fileList')" buttontext=" 选择文件" />
        </div>
        <div class="fitem" style="width:100%;">
            <label>已上传文件</label>
            <div id="fileList">

            </div>
        </div>
        <div class="fitem" style="width:100%;">
            <label>商品描述</label>
            <textarea name="Remark" style=" height: 130px; width: 300px; margin-top: 10px; display: inline-block;"></textarea>
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="save()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>

<div id="dd" class="easyui-dialog" title="图片查看" data-options="iconCls:'icon-save'" style="width:535px;height:560px" modal="true" closed="true">
    <img style="max-height:500px;max-width:500px;" />
</div>

<script type="text/javascript">
    function ajaxFileUpload(fileElementId, fileList) {
        var id = fileElementId;
        $.ajaxFileUpload({
            url: '/Home/UploadFile', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: id, //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            success: function (data, status)  //服务器成功响应处理函数
            {
                var html = ""
                $("#fileList").html("");
                $("#ImageUrl").val(data.data.path);
                html = "<img src=" + data.data.path + " style='max-width:60px;max-height:60px;margin-left:130px;'  />"
                $('#' + fileList).append(html);
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                $.messager.alert("上传失败！");
            }
        })
    }

    function newware() {
        //新增
        $('#dlg').dialog({
            title: '新增商品',
            width: 550,
            height: 520,
            closed: false,
            cache: false,
            modal: true
        }).dialog('center');
        $('#fm').form('clear');//清空表单
        //$('#fm').clearForm();//扩展清空表单
        $('#fileList').html("");
    }

    function save() {
        $('#fm').form('submit', {
            url: '/Ware/Save',
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success == true) {
                    $('#dlg').dialog('close');        // 关闭弹出框
                    $('#dg').datagrid('reload');    // 重新加载表数据

                } else {
                    $.messager.alert('错误', '操作失败！');
                }
            }
        });
    }

    function editware() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $("#fileList").html("");
            $('#fm').form('clear');
            $('#dlg').dialog({
                title: '修改商品',
                width: 550,
                height: 520,
                closed: false,
                cache: false,
                modal: true
            }).dialog('center');
            $('#fm').form('load', row);//表单赋值
            if (row.ImageUrl != null && row.ImageUrl != "") {
                $("#fileList").append("<img src=" + row.ImageUrl + " style='max-width:60px;max-height:60px;margin-left:130px;'  />")
            }
        }
        else {
            $.messager.alert("警告", "请选择一条！");
        }

    }


    function delware() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('警告', '你确定要删除当前选中数据?', function (r) {
                if (r) {
                    $.post("@Url.Action("Del", "Ware")", { id: row.ID }, function (data) {
                        if (data.success == true) {
                            $('#dg').datagrid('reload');    // 重新加载表数据
                        }
                        else {
                            $.messager.alert('错误', '操作失败！');
                        }
                    });
                }
            });
        }
        else {
            $.messager.alert("警告", "请选择一条！");
        }
    }


    function formatterurl(val, row) {

        return val != null && val != "" ? '<img src=' + val + ' style="max-width:40px;max-height:20px;"  onclick="tupian(\'' + val + '\')">' : "";
    }

    function tupian(val) {
        $('#dd img').attr('src', val)
        $('#dd').dialog('open').dialog('center').dialog('setTitle', '图片查看');
    }
    function search() {
        var name = $("#SpName").textbox('getValue'); 
        $('#dg').datagrid('reload', { Name: name});
    }
</script>